function jsViewport(name)
{  
  this.element = $(name);
  
  if(this.element.getContext)
  {
    this.context = this.element.getContext('2d');
  } else {
    throw new Error('Canvas ('+name+'): Cannot get Context');
  }
  
  this.size = $p(this.element.width,this.element.height); 
  this.createBuffer();
}

jsViewport.prototype.createBuffer = function ()
{
  this.buffer = this.context.createImageData(this.size.x,this.size.y);
}

jsViewport.prototype.commitBuffer = function ()
{
  this.context.putImageData(this.buffer,0,0);
}

jsViewport.prototype.swapBuffer = function ()
{
  this.commitBuffer();
  this.createBuffer();
}

jsViewport.prototype.getPosition = function (px,py)
{
  return (((this.size.y - py) * this.size.x) + px) * 4;
}

jsViewport.prototype.getPixel = function (px,py)
{
  return this.buffer.data[this.getPosition(px,py)];
}

jsViewport.prototype.drawPixel = function (px,py,pz,cr,cg,cb,ca)
{
  var arrayPosition = this.getPosition(px,py);
  
  if(!range(0,this.buffer.data.length-1,arrayPosition))
    return;
  
  this.buffer.data[arrayPosition  ] = cr;
  this.buffer.data[arrayPosition+1] = cg;
  this.buffer.data[arrayPosition+2] = cb;
  this.buffer.data[arrayPosition+3] = ca;
  
  //this.commitBuffer();
}